<template>
  <div>
    <a-modal v-model:visible="visible" :width="1000" @cancel="cancel">
      <template #title>
        <h3>试验信息维护</h3>
      </template>
      <template #footer>
        <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
      </template>
      <a-row class="top-title">
          <a-col :span="3">
            <h4>机构名称：</h4>
          </a-col>
          <a-col :span="9">
            <a-tree-select
            v-model:value="workshopName"
            show-search
            style="width: 200px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            allow-clear
            tree-default-expand-all
            :tree-data="powerTreeOrgData"
          >
            </a-tree-select>
          </a-col>
          <a-col :span="3">
              <h4>绝缘工具：</h4>
            </a-col>
              <a-col :span="9">
              <a-select ref="select" 
              style="width: 200px" 
              v-model:value="toolName" 
              allowClear
              :options="teamTool">
              </a-select>
          </a-col >
          <a-col :span="4">
            <a-button type="primary" @click="handleSearchClick(workshopName,toolName)" id="searchBtn">查询</a-button>
          </a-col>
      </a-row>
      <a-button type="primary" @click="handleAddInfoClick" class="btn">填写信息</a-button>
      <AddInfo ref="showAddInfo" :selectedKeys="selectedKeys" @loadData="loadData"></AddInfo>
      <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection" class="table"></a-table>
      </a-modal>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted,watch } from 'vue';
import AddInfo from './AddInfoModal.vue';
import Request from '@/utils/request-util'
import request from '@/utils/request'

const visible = ref(false);
const showAddInfo = ref(null)
const powerTreeOrgData = ref([]) 
const teamTool = ref([
{
      value: '绝缘手套',
      label: '绝缘手套',
    }, {
      value: '高压绝缘靴',
      label: '高压绝缘靴',
    }, {
      value: '10kv高压验电器绝缘杆',
      label: '10kv高压验电器绝缘杆',
    }, {
      value: '接地封线绝缘杆',
      label: '接地封线绝缘杆',
    }, {
      value: '高压令克棒',
      label: '高压令克棒',
    }, {
      value: '打冰杆',
      label: '打冰杆',
    }
])
// const value1 = ref([])
//绝缘工具的数据
const toolName = ref('')
//机构名称的数据
const workshopName = ref('')
const props = defineProps(['powerTreeData'])

// 获取机构下拉列表数据和表格数据
watchEffect(() =>{
   powerTreeOrgData.value = props.powerTreeData 
})
watch(workshopName,() => {
  loadData()
})

// watch(value, () => {
//   console.log(value.value);
// });
const selectedKeys=ref()
const columns = [{
  title: '编号',
  dataIndex: 'number',
  key: 'number',
}, {
  title: '状态',
  dataIndex: 'status',
  key: 'status',
//   width: '12%',
}, {
  title: '保管人',
  dataIndex: 'keeper',
  //   width: '30%',
  key: 'keeper',
}, {
  title: '试验日期',
  dataIndex: 'testDate',
  //   width: '30%',
  key: 'testDate',
}, {
  title: '有效截止日期',
  dataIndex: 'expireDate',
  //   width: '30%',
  key: 'expireDate',
}, {
  title: '试验人',
  dataIndex: 'tester',
  //   width: '30%',
  key: 'tester',
}, {
  title: '审核人',
  dataIndex: 'auditor',
  //   width: '30%',
  key: 'auditor',
}, {
  title: '投运日期',
  dataIndex: 'operateDate',
  //   width: '30%',
  key: 'operateDate',
}, {
  title: '试验结论',
  dataIndex: 'conclusion',
  //   width: '30%',
  key: 'conclusion',
}];
const dataSource = ref([]);
const showModal = () => {
  visible.value = true;
};

//取消按钮
const handleCancelClick = () => {
  visible.value = false;
  workshopName.value=''
  toolName.value=''
  dataSource.value=[]
};

const cancel=()=>{
  workshopName.value=''
  toolName.value=''
  dataSource.value=[]
}

// 获取数据
const loadData = async () => {
  let result = await Request.getAndLoadData('/toolDetail/pageByWorkshopAndTool')
  dataSource.value = result
  for(var i=0;i<dataSource.value.length;i++){
    dataSource.value[i].key = result[i].id 
  }
}

onMounted(async () => {
    loadData()
    // const result = await request({
    //   url:'/api/quota/optionalTools',
    //   method:'get',
    //   params:{
    //   orgId:workshopName
    //   }
    // })
    // console.log(result)
//     teamTool.value=[]
//     for(var i = 0;i < result.data.data.length;i++){
//       var obj={
//         value:result.data.data[i].name,
//         title:result.data.data[i].name,
//         // key:result.data.data.data[i].id
//       }
//       teamTool.value.push(obj)
//  }
    // console.log(data);
})
const rowSelection = ref({
//   checkStrictly: false,
  onChange: (selectedRowKeys, selectedRows) => {
    selectedKeys.value=selectedRowKeys
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
});
//查询按钮
const handleSearchClick = async (value,toolValue) => {
  const result = await request({
    url:'/toolDetail/pageByWorkshopAndTool',
    method:'get',
    params:{
      workshopName:value,
      toolName:toolValue
    }
  })
  console.log(result);
  dataSource.value = result.data.data
  
  
} 
//填写保管人
const handleAddInfoClick = () => {
  showAddInfo.value.showModal()
}
defineExpose({
  showModal,
})

</script>

<style lang="less" scoped>
  h3{
      display: inline-block;
      font-weight: 900;
  }
  .table{
      padding-top: 20px;
  }
  .btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 100px;
      padding: 0;
  }
  .top-title{
      margin-bottom: 20px;
  }
#searchBtn{
  background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 100px;
      padding: 0;
      margin-top: 20px;
}
</style>